<!DOCTYPE html>
<html>
<head>
    <title>排序算法可视化</title>
    <style>
        .container {
            width: 800px;
            margin: 20px auto;
        }
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }
        .control-group {
            margin: 10px 0;
        }
        canvas {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:disabled {
            background: #cccccc;
        }

        select {
            padding: 4px 15px 4px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            appearance: none;
            background-color: white;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

        select:hover {
            border-color: #bdbdbd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <div class="control-group">
                <label>排序算法：
                    <select id="algorithm">
                        <option value="bubble">冒泡排序</option>
                        <option value="selection">选择排序</option>
                        <option value="insertion">插入排序</option>
                    </select>
                </label>
                <label>速度：
                    <input type="range" id="speed" min="1" max="200" value="100">
                </label>
            </div>
            <div class="control-group">
                <button onclick="generateNew()">生成新数据</button>
                <button id="startBtn" onclick="startSorting()">开始排序</button>
            </div>
        </div>
        <canvas id="canvas" width="800" height="400"></canvas>
    </div>

    <script>
        let data = [];
        let isSorting = false;
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 初始化生成数据
        generateNew();

        // 生成随机数据
        function generateNew() {
            data = Array.from({length: 12}, () => Math.floor(Math.random() * 99) + 1);
            drawBars();
        }

        // 绘制柱状图
        function drawBars(highlight = []) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const barWidth = canvas.width / data.length - 5;
            
            data.forEach((value, index) => {
                const height = (value / 100) * canvas.height;
                ctx.fillStyle = highlight.includes(index) ? '#ff4444' : '#2196F3';
                ctx.fillRect(
                    index * (barWidth + 5),
                    canvas.height - height,
                    barWidth,
                    height
                );
            });
        }

        // 排序控制器
        async function startSorting() {
            if (isSorting) return;
            isSorting = true;
            document.getElementById('startBtn').disabled = true;
            
            const algorithm = document.getElementById('algorithm').value;
            const speed = document.getElementById('speed').value;
            console.log("时间控制", (210 - speed) * 5);
            let sorter;
            switch(algorithm) {
                case 'bubble': sorter = bubbleSort(data); break;
                case 'selection': sorter = selectionSort(data); break;
                case 'insertion': sorter = insertionSort(data); break;
            }

            for (let step of sorter) {
                drawBars(step.highlight);
                await new Promise(resolve => 
                    setTimeout(resolve, (210 - speed) * 5)
                );
            }
            
            isSorting = false;
            document.getElementById('startBtn').disabled = false;
            drawBars();
        }

        // 冒泡排序
        function* bubbleSort(arr) {
            let n = arr.length;
            for (let i = 0; i < n-1; i++) {
                for (let j = 0; j < n-i-1; j++) {
                    if (arr[j] > arr[j+1]) {
                        [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
                        yield {highlight: [j, j+1]};
                    }
                }
            }
        }

        // 选择排序
        function* selectionSort(arr) {
            let n = arr.length;
            for (let i = 0; i < n; i++) {
                let min = i;
                for (let j = i+1; j < n; j++) {
                    if (arr[j] < arr[min]) min = j;
                }
                if (min !== i) {
                    [arr[i], arr[min]] = [arr[min], arr[i]];
                    yield {highlight: [i, min]};
                }
            }
        }

        // 插入排序
        function* insertionSort(arr) {
            let n = arr.length;
            for (let i = 1; i < n; i++) {
                let key = arr[i];
                let j = i-1;
                while (j >= 0 && arr[j] > key) {
                    arr[j+1] = arr[j];
                    yield {highlight: [j, j+1]};
                    j--;
                }
                arr[j+1] = key;
            }
        }
    </script>
</body>
</html>